<template>
  <div class="newsinfo-container">
    <h1 class="title">{{ newsInfo.title }}</h1>
    <div class="time">
      <span>发表时间：{{ newsInfo.add_time | dateFormat }}</span>
      <span>点击：{{ newsInfo.click }}次</span>
    </div>
    <hr />
    <div class="content" v-html="newsInfo.content"></div>

    <!-- 评论区域 -->
    <my-comment :id="newsInfo.id"></my-comment>
  </div>
</template>

<script>
// 导入共享的发表评论组件
import comment from '~/components/comment.vue'

export default {
  layout: 'cms',
  components: {
    'my-comment': comment
  },
  // 通过 validate 验证动态路由中的参数
  validate({ params }) {
    // 如果 return false，则会跳转到错误页面
    return /^\d+$/.test(params.id)
  },
  // 在服务端调用这个生命周期函数
  async asyncData({ params, $axios }) {
    let newsInfo = {}
    const { data: res } = await $axios.get('/api/getnew/' + params.id)
    if (res.status === 0 && res.message.length === 1) {
      newsInfo = res.message[0]
    }
    // 需要 return 一个新的状态对象
    return {
      newsInfo
    }
  }
}
</script>

<style lang="less" scoped>
.newsinfo-container {
  padding: 0 5px;
}
.title {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin: 10px 0;
}

.time {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #26a2ff;
}

.content {
  font-size: 13px;
  line-height: 28px;
}
</style>
